<template>
  <div>
<!--    功能按钮-->
    <!--    搜索表单-->
    <div style="margin:10px 5px">
      <!--      v-mode v-model绑定变量,使其可以进行搜索;@click使其可以搜索-->
      <el-input style="width:240px" placeholder="请输入名称" v-model="params.name"></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load"><el-icon style="vertical-align:middle;margin-right: 5px"><Search /></el-icon> 搜索</el-button>
      <el-button style="margin-left: 5px" type="warning" @click="reset"><el-icon style="vertical-align:middle;margin-right: 5px"><Refresh /></el-icon> 重置</el-button>
      <el-button style="margin-left: 5px" type="success" @click="$router.push('/addProductType')"><el-icon style="vertical-align:middle;margin-right: 5px"><Plus /></el-icon> 新增一级类别</el-button>
    </div>

<!--    表格区域-->
    <el-table :data="tableData" stripe  style="width: 150%" row-key="id" default-expand-all>
      <el-table-column prop="id" label="ID" style="width:40px"/>
      <el-table-column prop="name" label="类别名"  style="width:80px"/>
<!--      <el-table-column prop="password" label="密码" width="80"/>-->
      <el-table-column prop="remark" label="备注" style="width:80px"/>

      <el-table-column fixed="right" label="操作" style="width:580px">
        <template #default="scope">
          <!--          scope.row就是当前行数据;scope.row.id获取当前行id @click方法实现点击后跳转,并显示数据信息-->
          <el-button type="success" v-if="!scope.row.pid" @click="handleAdd(scope.row)">
            添加二级分类
          </el-button>

          <el-button type="primary" @click="$router.push('/editProductType?id=' + scope.row.id)">
            编辑
          </el-button>

          <el-popconfirm title="确认删除吗?"  confirm-button-text='是'
                         cancel-button-text='否' @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <!--    分页功能,来自element ui-->
    <!--    current-page和page-size绑定分页组件,提供当前页码以及当前每一个个数跟数据绑定-->
    <div style="margin-top: 20px">
      <el-pagination
          background
          :current-page="params.pageNum"
          :page-size="params.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total">
      </el-pagination>
    </div>

<!--    实现二级分类添加-->
    <el-dialog title="添加二级分类" v-model="dialogFormVisible" width="30%">
      <el-form :model="form" label-width="100px" ref="ruleForm" :rules="rules">
        <el-form-item label="类别名" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="分类备注" prop="remark">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request"
import { Search,Refresh,Plus} from '@element-plus/icons-vue'
export default {
  name: "ProductTypeList",
  components:{
    Search,
    Refresh,
    Plus
  },
  data(){
    return{
      tableData:[],
      total: 0,
      pid:null,
      dialogFormVisible: false,
      form: {},
      //  params绑定值用于向localhost:9090/productType/page发送请求,进行模糊查询
      params: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      rules:{
        name: [
          {required: true, message: '请输入类别名称', trigger: 'blur'}
        ]
      }
    }
  },
  created(){
    //  页面加载后调用method方法
    this.load()
  },
  methods:{
    load(){
      request.get('/producttype/page',{
        params:this.params
      }).then(res => {
        if(res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total
          // console.log(this.params)
        }
      })
    },
    reset(){
      this.params={
        pageNum: 1,
        pageSize: 10,
        name: ''
      }
      this.load()
    },
    add(){

    },
    handleCurrentChange(pageNum){
      //  点击分页按钮实现分页
      this.params.pageNum=pageNum
      this.load()
    },
    handleAdd(row){
      //将当前行的id作为二级分类的pid
      this.pid = row.id
      this.dialogFormVisible = true
    },
    handleDelete(id){
      console.log(id)
      request.delete("/producttype/delete/"+id).then(res => {
        if(res.code == '200'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
        this.load() //重新加载表格的数据

      })
    },
    save(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          //  save方法用于提交数据
          //去给我们当前form的pid去设置成我们当前行的id ！！
          //给二级分类赋值pid
          this.form.pid = this.pid
          request.post('/producttype/save',this.form).then(res => {
            if (res.code === '200'){
              this.$notify.success('新增二级分类成功')
              //  新增成功后resetFields清空输入框内数据
              this.$refs['ruleForm'].resetFields()
              this.dialogFormVisible = false
              this.load()
            } else{
              this.$notify.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-right: 20px;
}
</style>